<template>
  <div >
    <!-- 按钮 -->
     <div class="btns">
      <el-button type="primary" size="small" @click="toAdd">添加</el-button>
    </div> 
    <br>
    <!-- 表格 -->
    <el-table :data="comments" row-key="id" size="small"
      :tree-props="{children: 'children'}" >
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="score" label="分数" width="120"></el-table-column>
      <el-table-column prop="content" label="评论内容" width="120"></el-table-column>
      <el-table-column prop="commentTime" label="评论时间"></el-table-column>
      <el-table-column prop="orderId" label="订单编号"></el-table-column>
      <el-table-column prop="userId" label="用户编号"></el-table-column>
      <el-table-column fixed="right" label="操作" width="160" align="center">
         
         <template slot-scope="scope">
          <el-button type="danger" @click="del(scope.row.id)"  size="mini">删除</el-button>
          <el-button type="primary" @click="edit(scope.row)"  size="mini">编辑</el-button>
        </template>
      </el-table-column> 
    </el-table>
    <!-- 表格结束 -->
    <!-- 模态框 -->
     <el-dialog title="评论" :visible.sync="visible">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item label="分数" prop="score">
          <el-input v-model="form.score" clearable placeholder="请输入评论分数"></el-input>
        </el-form-item>
        <el-form-item label="评论内容" prop="content">
          <el-input v-model="form.content" clearable placeholder="请输入评论内容"></el-input>
        </el-form-item>
       <el-form-item label="订单编号" prop="orderId">
          <el-input v-model="form.orderId" clearable placeholder="请输入订单Id"></el-input>
        </el-form-item>
        <el-form-item label="用户编号" prop="userId">
          <el-input v-model="form.userId" clearable placeholder="请输入用户编号"></el-input>
        </el-form-item>
        <el-form-item label="所属评论" prop="parentId">
          <el-select v-model="form.parentId" placeholder="请选择所属评论">
            <el-option v-for="c in comments" :key="c.id" :label="c.name" :value="c.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="close('ruleForm')">取消</el-button>
        <el-button size="small" type="primary" @click="submit('ruleForm')">确定</el-button>
      </div>
    </el-dialog> 
    <!-- 模态框结束 -->
  </div>
</template>
<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
     // name: "栏目管理",
      visible: false,
      form: {},
      comments: [],
      ruleForm: {
       score: '',
       content: '',
        orderId: '',
        userId: '',
        parentId: ''
      },
      rules: {
         score: [{ required: true, message: "请输入分数", trigger: "blur" }],
         content: [{ required: true, message: "请输入内容", trigger: "blur" }],
         orderId: [{ required: true, message: "请输入订单编号", trigger: "blur" }],
         userId: [{ required: true, message: "请输入数量", trigger: "blur" }],
         parentId: [
           { required: false, message: "请选择所属评论", trigger: "blur" }
         ]
       }
    };
  },
  created() {
    this.loadComments();
  },
  methods: {
    // 加载栏目信息
    loadComments() {
      let url = "http://localhost:8888/comment/find_all";
      get(url).then(response => {
        this.comments = response.data;
      });
    },
    loadComments() {
      let url = "http://localhost:8888/comment/find_all_with_child";
      get(url).then(response => {
        this.comments = response.data;
      });
    },
     toAdd() {
      this.form = {};
      this.visible = true;
     },
    del(id) {
       this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
    //     // 删除
         let url = "http://localhost:8888/comment/del_by_id"
         get(url,{id: id}).then(response => {
           // 提示
           this.$message({type:'success', message:response.message})
    //       // 刷新数据
           this.loadComments();
         })
       })
     },
     edit(row) {
      this.visible = true;
      this.form = row
     },
     close(form) {
       this.visible = false;
       this.$refs[form].resetFields();
     },
     submit(form) {
       this.$refs[form].validate(valid => {
         if (valid) {
          // 表单验证成功的情况
           let url = "http://localhost:8888/comment/commit";
           post(url, this.form).then(response => {
             this.$message({ type: "success", message: response.message });
             this.visible = false;
             this.loadComments();
           });
        } else {
           return false;
     }
       });
     }
  }
};
</script>
<style scoped>
.btns {
  margin-bottom: .5em;
}
</style>